<template>
  <div class="app-container">
    <el-row type="flex" class="el-rowBox">
      <!-- 运营人员 -->
      <el-col :span="12">
        <div class="box1 user-task-stats-chart bgc1">
          <el-row>
            <div class="title">
              <h3>运营人员（当天）</h3>
            </div>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col>
              <div class="num color1 text-shadow1">{{ userOne.total }}</div>
              <div class="text color2">工单总数（个）</div>
            </el-col>
            <el-col>
              <div class="num color1 text-shadow1">{{ userOne.completedTotal }}</div>
              <div class="text color2">完成工单（个）</div>
            </el-col>
            <el-col>
              <div class="num color1 text-shadow1">{{ userOne.cancelTotal }}</div>
              <div class="text color2">拒绝工单（个）</div>
            </el-col>
            <el-col>
              <div class="num color1 text-shadow1">{{ userOne.workerCount }}</div>
              <div class="text color2">运营人员数（个）</div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!-- 运维人员 -->
      <el-col :span="12">
        <div class="box2 user-task-stats-chart bgc2">
          <el-row>
            <div class="title">
              <h3>运维人员（当天）</h3>
            </div>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col>
              <div class="num color3 text-shadow2">{{ userTwo.total }}</div>
              <div class="text color4">工单总数（个）</div>
            </el-col>
            <el-col>
              <div class="num color3 text-shadow2">{{ userTwo.completedTotal }}</div>
              <div class="text color4">完成工单（个）</div>
            </el-col>
            <el-col>
              <div class="num color3 text-shadow2">{{ userTwo.cancelTotal }}</div>
              <div class="text color4">拒绝工单（个）</div>
            </el-col>
            <el-col>
              <div class="num color3 text-shadow2">{{ userTwo.workerCount }}</div>
              <div class="text color4">运营人员数（个）</div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 底下盒子 -->
    <el-row type="flex" class="bottomBox">
      <!-- 工单状态 -->
      <el-col :span="18">
        <div class="box3 user-task-status">
          <el-row type="flex">
            <el-col :span="10">
              <h4>工单状态</h4>
            </el-col>
            <!-- 日期选择器 -->
            <el-col :span="8">
              <el-date-picker
                v-model="dateData"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="$forceUpdate()"
              />
            </el-col>
            <el-col :span="6" class="rightWord">
              <div class="week-month-year">
                <el-tabs v-model="activeName2" type="card" class="el-tabs__nav2" @tab-click="handleClick">
                  <!-- 周 -->
                  <el-tab-pane label="周" class="item" name="周" />
                  <!--月 -->
                  <el-tab-pane label="月" class="item" name="月" />
                  <!-- 年 -->
                  <el-tab-pane label="年" class="item" name="年" />
                </el-tabs>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <div class="charts">
              <div v-if="workOrderData.length>0" class="empty">
                <el-row v-for="item in workOrderData" :key="item" type="flex">
                  <el-col class="empty-item">
                    完成数:{{ item.finishCount }}
                  </el-col>
                  <el-col class="empty-item">
                    进行中总数:{{ item.progressCount }}
                  </el-col>
                  <el-col class="empty-item">
                    取消的工单数:{{ item.cancelCount }}
                  </el-col>
                  <el-col class="empty-item">
                    发生日期:{{ item.collectDate }}
                  </el-col>
                </el-row>
              </div>
              <div v-else class="tips">
                <img src="@/assets/common/noshuju.png" alt="">
                <div>暂无数据</div>
              </div>
            </div>
          </el-row>
        </div>
      </el-col>
      <!-- 人效排名 -->
      <el-col :span="6">
        <div class="box4 bgc3 user-task-rank">
          <el-row type="flex">
            <el-col>
              <h4>人效排名（月度）</h4>
            </el-col>
            <el-col>
              <el-select v-model="areaValue" placeholder="请选择" @change="changeSelect">
                <el-option value="0" label="全部">全部</el-option>
                <el-option
                  v-for="item in areaList"
                  :key="item.id"
                  :label="item.remark"
                  :value="item.id"
                >
                  {{ item.remark }}
                </el-option>
              </el-select>

            </el-col>
          </el-row>
          <el-row class="role-group">
            <div class="role-list">
              <el-tabs v-model="activeName" type="card" class="el-tabs__nav2" @tab-click="checkedTab">
                <!-- 运营人员 -->
                <el-tab-pane label="运营人员" name="false" class="item">
                  <div v-if="renderName.length>0" class="empty">
                    <el-row type="flex">
                      <el-col :span="5" class="top top1">
                        {{ renderName.length }}
                      </el-col>
                      <el-col :span="13" class="user-name">
                        {{ renderName[0].userName }}
                      </el-col>
                      <el-col :span="6" class="work-count">
                        {{ renderName[0].workCount }}单
                      </el-col>
                    </el-row>
                  </div>
                  <div v-else class="tips">
                    <img src="@/assets/common/noshuju.png" alt="">
                    <div>暂无数据</div>
                  </div>

                </el-tab-pane>
                <!-- 运维人员 -->
                <el-tab-pane label="运维人员" name="true" class="item">
                  <div class="empty2" />
                  <div class="tips">
                    <img src="@/assets/common/noshuju.png" alt="">
                    <div>暂无数据</div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { taskReportInfo, numBerAPI, WorkOrderStatisticsAPI } from '@/api/PersonnelStatistics'
import { getAreasAPI } from '@/api/people'
import moment from 'moment'
export default {
  data() {
    return {
      // 日期时间
      dateData: '',
      areaValue: '',
      activeName: 'false',
      userDayInfo: [],
      areaList: [],
      startDate: '',
      startWeek: '',
      startMonth: '',
      startYear: '',
      // 渲染的成绩名称
      renderName: '',
      userOne: {},
      userTwo: {},
      // 切换周月年数据
      activeName2: '周',
      // 工单状态数据
      workOrderData: []

    }
  },
  async   created() {
    this.getArea()
    this.getUserWorkTime()
  },
  mounted() {
    this.dateData = [this.startWeek, this.startDate]
    this.getUserInfo()
  },
  methods: {
    // 获取用户工作时间
    getUserWorkTime() {
      // 现在时间
      this.startDate = moment().format('YYYY-MM-DD')
      // 本月4.1
      this.startMonth = moment().month(moment().month()).startOf('month').format('YYYY-MM-DD')
      // 本周
      this.startWeek = moment().startOf('week').add(1, 'days').format('YYYY-MM-DD')
      // 本年
      this.startYear = moment().year(moment().year()).startOf('year').format('YYYY-MM-DD')
    },
    // 获取地区
    async  getArea() {
      const res = await getAreasAPI()
      this.areaList = res.data.currentPageRecords
    },
    // 给后端发送日期格式
    async  getUserInfo() {
      const start = moment().format('YYYY-MM-DD 00:00:00')
      const end = moment().format('YYYY-MM-DD HH:mm:ss')
      const res = await taskReportInfo(start, end)
      this.userDayInfo = res.data
      this.userOne = this.userDayInfo[0]
      this.userTwo = this.userDayInfo[1]
    },
    // 地区选择
    async  changeSelect() {
      const res = await numBerAPI(this.startMonth, this.startDate, this.activeName, this.areaValue)
      this.renderName = res.data
    },
    // tab选中
    checkedTab() {
      if (this.areaValue === '') {
        this.$message.error('请选择地区！')
        return
      }
      this.changeSelect()
    },
    // 周月年切换
    async  handleClick() {
      if (this.activeName2 === '周') {
        this.dateData = [this.startWeek, this.startDate]
        const res = await WorkOrderStatisticsAPI(this.startWeek, this.startDate)
        this.workOrderData = res.data
      } else if (this.activeName2 === '月') {
        this.dateData = [this.startMonth, this.startDate]
        const res = await WorkOrderStatisticsAPI(this.startWeek, this.startDate)
        this.workOrderData = res.data
      } else if (this.activeName2 === '年') {
        this.dateData = [this.startYear, this.startDate]
        const res = await WorkOrderStatisticsAPI(this.startWeek, this.startDate)
        this.workOrderData = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.el-rowBox {

  .bgc1 {
    background-color: #e9f3ff;
    background-repeat: no-repeat,no-repeat;
    background-image: url('~@/assets/common/leftbeijing.png'),url('~@/assets/common/yunybeijing.png');
    background-position: 0 0,calc(100% - 12px) 100%;
    .title h3 {
      margin: 0;
      padding: 0;
    }
    .el-col-12first{
      padding-left: 10px;
      padding-right: 10px;
    }
    .text-shadow1 {
      text-shadow: 2px 4px 7px rgba(85,132,255,.5);
    }
    .color1 {
      color: #072074;
    }
    .num {
      height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    margin-top: 15px;
    }
    .text {
      height: 17px;
    margin-top: 13px;

    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    line-height: 17px;
    text-align: center;
    }
    .color2 {
      color: #91a7dc;
    }
  }
  .bgc2 {
    background: #fbefe8 url('~@/assets/common/rightbeijing.png') no-repeat calc(100% - 12px) 100%;
    .title h3 {
      margin: 0;
      padding: 0;
    }
    .el-col-12first{
      padding-left: 10px;
      padding-right: 10px;
    }
    .text-shadow2 {
      text-shadow: 2px 4px 7px rgba(255,99,85,.5);
    }
    .color3 {
      color: #ff5757;
    }
    .num {
      height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    margin-top: 15px;
    }
    .text {
      height: 17px;
    margin-top: 13px;

    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    line-height: 17px;
    text-align: center;
    }
    .color4 {
      color: #de9690;
    }
  }
  .user-task-stats-chart {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: calc(25vh - 30px);
    min-height: 166px;
  }
  .box1 {
    padding: 20px;
    border-radius: 20px;
    margin-right: 6px;
}
.box2 {
    padding: 20px;
    border-radius: 20px;
    margin-left: 6px;
}
}
.bottomBox {
  .user-task-status {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: calc(75vh - 90px);
    min-height: 542px;
    margin-top: 20px;
    background: #fff;
    h4 {
      padding: 0;
      margin: 0;
      height: 40px;
      line-height: 40px;
    }

    .empty {
    padding: 10px;
margin-top: 40px;
width: 100%;
text-align: center;
-webkit-box-flex: 1;
    flex: 1;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    // justify-content: center;
    -webkit-box-align: center;
    // align-items: center;
    .empty-item {
      padding: 6px;
    }
    }
.tips {
  text-align: center;
  margin-top: 100px;
}
.rightWord {
text-align: right;
.week-month-year {
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
margin-left: 45px;
::v-deep .el-tabs--card>.el-tabs__header {
border: none;
}
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: none

}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
border: none
}
.el-tabs__nav2 {
height: 40px;
background: rgba(233,243,255,.37);
border-radius: 10px;
.top {
  display: inline-block;
margin-left: 10px;
text-align: center;
font-size: 12px;
font-family: zihun143-zhengkuchaojihei,zihun143;
font-weight: 400;

line-height: 14px;
}
.top1 {
  width: 21px;
height: 20px;
background: url('~@/assets/common/jiangbei.png');
color: #8e5900;
}
.user-name {
  height: 20px;
font-size: 14px;
font-family: PingFangSC-Medium,PingFang SC;
font-weight: 500;
color: #333;
line-height: 20px;
margin-left: 20px;
}
.work-count {
  height: 20px;
font-size: 14px;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
color: #737589;
line-height: 20px;
text-align: right;
}
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
background: #e7e5e5;
-webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,.11);
box-shadow: 0 0 4px 0 rgba(0,0,0,.11);
 border-radius: 7px;
font-weight: 600;
color: #333;
}

.tips {
text-align: center;
}
}
}
  }
  .user-task-rank {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: calc(75vh - 90px);
    min-height: 542px;
    margin-top: 20px;
    background: #fff;
    h4 {
      padding: 0;
      margin: 0;
      height: 40px;
      line-height: 40px;
    }
    .role-group {
      margin-top: 20px;
    .role-list {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    // padding: 20px;
::v-deep .el-tabs--card>.el-tabs__header {
  border: none;
}
  ::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none

}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
  border: none
}
.el-tabs__nav2 {
  height: 40px;
    background: rgba(233,243,255,.37);
    border-radius: 10px;
    .top {
      display: inline-block;
    margin-left: 10px;
    text-align: center;
    font-size: 12px;
    font-family: zihun143-zhengkuchaojihei,zihun143;
    font-weight: 400;

    line-height: 14px;
    }
    .top1 {
      width: 21px;
    height: 20px;
    background: url('~@/assets/common/jiangbei.png');
    color: #8e5900;
    }
    .user-name {
      height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Medium,PingFang SC;
    font-weight: 500;
    color: #333;
    line-height: 20px;
    margin-left: 20px;
    }
    .work-count {
      height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #737589;
    line-height: 20px;
    text-align: right;
    }
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  background: #e7e5e5;
    -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,.11);
    box-shadow: 0 0 4px 0 rgba(0,0,0,.11);
     border-radius: 7px;
    font-weight: 600;
    color: #333;
}
  //   .empty2 {
  //  height: 100px;
  //   }
.tips {
  text-align: center;
  margin-top: 100px;
}
    }
  }
  }
  .box3 {
    padding: 20px;
    border-radius: 20px;
    margin-right: 6px;
  }
  .box4 {
    padding: 20px;
    border-radius: 20px;
    margin-left: 6px;
  }
}
</style>
